<template>
    <div class="page-wrapper">
        <div class="myInfo">
            <div class="myInfo-title">
                <div class="left">
                    <text class="name">测试一级刘阳</text>
                    <text class="type">正常拓展</text>
                </div>
                <div class="right">
                    <text>查看详情</text>
                    <img src="@/assets/merchant/toNext.png" alt="" />
                </div>
            </div>
            <div class="it">
                <div class="row">
                    <div class="label">注册时间</div>
                    <div class="value">2023-06-30 10:40:42</div>
                </div>
                <div class="row">
                    <div class="label">商户编号</div>
                    <div class="value">
                        DTC98234897
                        <img src="@/assets/merchant/copy.png" alt="" />
                    </div>
                </div>
                <div class="row">
                    <div class="label">达标状态(电签)</div>
                    <div class="value" style="color: #66d6ff">已达标</div>
                </div>
                <div class="row">
                    <div class="label">达标时间</div>
                    <div class="value">2023-06-30 10:40:42</div>
                </div>
                <div class="row">
                    <div class="label">历史机具</div>
                    <div class="value">
                        查看详情
                        <img src="@/assets/merchant/toNext2.png" alt="" />
                    </div>
                </div>
            </div>
        </div>

        <div class="posInfo">
            <div class="title">
                <img src="@/assets/merchant/title.png" alt="" />
                <text>4G电签</text>
            </div>
            <div class="it">
                <div class="row">
                    <div class="label">机具编号</div>
                    <div class="value">2023645912354228</div>
                </div>
                <div class="row">
                    <div class="label">唤醒时间</div>
                    <div class="value">2023645912354228</div>
                </div>
                <div class="row">
                    <div class="label">服务费金额</div>
                    <div class="value">2023645912354228</div>
                </div>
                <div class="row">
                    <div class="label">通讯费应扣费金额</div>
                    <div class="value">2023645912354228</div>
                </div>
                <div class="row">
                    <div class="label">通讯费应扣费时间</div>
                    <div class="value">2023645912354228</div>
                </div>
            </div>
            <div class="addPad">
                <div class="table">
                    <div class="top">
                        <div class="label">费率政策</div>
                        <div class="label">刷卡</div>
                        <div class="label">扫码</div>
                        <div class="label">手机pay</div>
                    </div>
                    <div class="bottom">
                        <div class="tb">
                            <div class="tr">
                                <div class="label">成长期</div>
                                <div class="label">0.60%+0</div>
                                <div class="label">0.35%</div>
                                <div class="label">0.38%</div>
                            </div>
                            <div class="tr">
                                <div class="label">稳定期</div>
                                <div class="label">0.60%+0</div>
                                <div class="label">0.35%</div>
                                <div class="label">0.38%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Trading">
            <div class="title">
                <img src="@/assets/merchant/title.png" alt="" />
                <text>交易额统计(元)</text>
            </div>
            <div class="one-wrapper">
                <div class="one">
                    <div class="left border">
                        <div class="label">累计交易额</div>
                        <div class="value">34234324.11</div>
                    </div>
                    <div class="left">
                        <div class="label">本月总交易额</div>
                        <div class="value">34234324.11</div>
                    </div>
                </div>
                <div class="one">
                    <div class="left border">
                        <div class="label">本月贷记卡交易额</div>
                        <div class="value">34234324.11</div>
                    </div>
                    <div class="left">
                        <div class="label">本月借记卡交易额</div>
                        <div class="value">34234324.11</div>
                    </div>
                </div>
                <div class="one" style="border: none">
                    <div class="left border">
                        <div class="label">本月扫码交易额</div>
                        <div class="value">34234324.11</div>
                    </div>
                    <div class="left">
                        <div class="label">本月手机pay交易额</div>
                        <div class="value">34234324.11</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="Trading">
            <div class="myTradingTitle">
                <div class="left">
                    <img class="titleImg" src="@/assets/merchant/title.png" alt="" />
                    <text>交易趋势</text>
                </div>
                <div class="right">
                    <div class="l" @click="selectDay(1)" :class="active === 1 ? 'active' : ''">近10天</div>
                    <div class="r" @click="selectDay(2)" :class="active === 2 ? 'active' : ''">近半年</div>
                </div>
            </div>
            <div class="two-wrapper">
                <div id="Trading"></div>
            </div>
        </div>
        <div class="Trading">
            <div class="myTradingTitle">
                <div class="left">
                    <img class="titleImg" src="@/assets/merchant/title.png" alt="" />
                    <text>交易趋势</text>
                </div>
                <div class="right" style="box-shadow: none" @click="catTradingDetail">
                    <text>查看明细</text>
                    <img src="@/assets/merchant/toNext2.png" alt="" />
                </div>
            </div>
            <div class="two-wrapper">
                <div class="chooseDay">
                    <div class="left">
                        <div class="radio"></div>
                        商户交易量
                    </div>
                    <div class="right" @click="show = true">
                        2023.01.01 - 2023.02.02
                        <img src="@/assets/merchant/toNext3.png" alt="" />
                    </div>
                </div>
                <div id="Trading2"></div>
            </div>
        </div>
        <van-calendar color="#66d6ff" v-model:show="show" type="range" @confirm="onConfirm" />
    </div>
</template>
<script lang="ts" setup>
import { nextTick } from 'vue'
import * as echarts from 'echarts'
import { parseTime } from '@/utils/utils'
const active = ref(1)
const date = ref('')
const show = ref(false)
const Router = useRouter()
const selectDay = num => {
    active.value = num
}
const catTradingDetail = () => {
    Router.push({
        name: 'TradingDetail'
    })
}
const onConfirm = values => {
    const [start, end] = values
    show.value = false
    date.value = `${parseTime(start, '{y}.{m}.{d}')} - ${parseTime(end, '{y}.{m}.{d}')}`
    console.log(date.value)
}
const getTrading = () => {
    // 基于准备好的dom，初始化echarts实例
    document.getElementById('Trading').setAttribute('_echarts_instance_', '')

    var chartDom = document.getElementById('Trading')
    var myChart = echarts.init(chartDom)
    var option

    option = {
        tooltip: {
            show: true
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        grid: {
            top: 20,
            bottom: 30,
            left: 70,
            right: 20
        },
        series: [
            {
                color: '#66d6ff',
                data: [120, 200, 150, 80, 70, 110, 120, 200, 150, 80, 70, 110, 1830],
                type: 'bar'
            }
        ]
    }

    option && myChart.setOption(option)
}
const getTrading2 = () => {
    // 基于准备好的dom，初始化echarts实例
    document.getElementById('Trading2').setAttribute('_echarts_instance_', '')

    var chartDom = document.getElementById('Trading2')
    var myChart = echarts.init(chartDom)
    var option

    option = {
        tooltip: {
            show: true
        },
        grid: {
            top: 20,
            bottom: 30,
            left: 70,
            right: 20
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                color: '#66d6ff',
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
            }
        ]
    }

    option && myChart.setOption(option)
}

nextTick(() => {
    getTrading()
    getTrading2()
})
</script>

<style scoped lang="scss">
.page-wrapper {
    padding: 10px;
    font-family: SimHei;
}
.myInfo {
    background: #ffffff;
    opacity: 1;
    border-radius: 8px;
    .myInfo-title {
        background: linear-gradient(180deg, #66d6ff 0%, #a9d0fe 100%);
        opacity: 1;
        border-radius: 8px 8px 0px 0px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
            display: flex;
            align-items: center;
            .name {
                font-size: 14px;
                font-family: SimHei;
                font-weight: 500;
                color: #ffffff;
                opacity: 1;
            }
            .type {
                background: #66d6ff;
                opacity: 1;
                border-radius: 4px;
                font-size: 10px;
                font-weight: 500;
                padding: 5px;
                margin-left: 7px;
                font-family: SimHei;
                color: #ffffff;
            }
        }
        .right {
            font-size: 14px;
            font-weight: 400;
            color: #ffffff;
            opacity: 1;
            img {
                width: 14px;
                margin-left: 5px;
                height: 14px;
            }
        }
    }
}
.it {
    padding: 10px;
    background: #ffffff;
    opacity: 1;
    border-radius: 8px;
    .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        .label {
            font-size: 14px;
            font-weight: 400;
            line-height: 0px;
            color: #979797;
            opacity: 1;
        }
        .value {
            font-size: 14px;
            font-weight: 400;
            color: #212121;
            display: flex;
            align-items: center;
            opacity: 1;
            img {
                margin-left: 5px;
                width: 14px;
                height: 14px;
            }
        }
    }
}
.posInfo {
    background: #ffffff;
    margin-top: 10px;
    border-radius: 8px;
    .addPad {
        padding: 0 10px 10px 10px;
        .table {
            background: #e1e9ff;
            opacity: 1;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            .top {
                display: flex;
                padding: 10px 0;
                .label {
                    width: 25%;
                    text-align: center;
                    font-size: 13px;
                    font-weight: 400;
                    color: #000000;
                }
            }
            .bottom {
                padding: 0 5px 5px 5px;
                flex: 1;
                .tb {
                    background: #ffffff;
                    height: 100%;
                    padding: 5px 0;
                    width: 100%;
                    .tr {
                        padding: 5px 0;
                        display: flex;
                    }
                    .label {
                        width: 25%;
                        text-align: center;
                        font-size: 13px;
                        font-weight: 400;
                        color: #000000;
                    }
                }
            }
        }
    }
}

.Trading {
    background: #ffffff;
    border-radius: 8px;
    margin-top: 10px;
    .myTradingTitle {
        border-bottom: 1px solid #e8e8e8;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .titleImg {
            margin-right: 10px;
            width: 22px;
            height: 15px;
        }
        text {
            font-size: 16px;
            font-weight: 500;
            color: #000000;
            opacity: 1;
        }
        .right {
            background: #ffffff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
            opacity: 1;
            border-radius: 15px;
            color: #979797;
            font-size: 12px;
            display: flex;
            padding: 3px 5px;
            align-items: center;
            img {
                width: 14px;
                height: 14px;
                margin-left: 5px;
            }
            .l,
            .r {
                border-radius: 10px;
                padding: 5px;
            }
            .active {
                background: #e9f4ff;
                color: #66d6ff;
            }
        }
    }
    .one-wrapper {
        padding: 10px 20px;
        .one {
            display: flex;
            border-bottom: 1px solid #e8e8e8;
            .left {
                padding: 20px;
                width: 50%;
                text-align: center;

                .label {
                    font-size: 12px;
                    font-weight: 400;
                    color: #979797;
                    opacity: 1;
                }
                .value {
                    font-family: 'DingTalk JinBuTi';
                    font-size: 18px;
                    margin-top: 10px;
                }
            }
            .border {
                border-right: 1px solid #e8e8e8;
            }
        }
    }
}
.two-wrapper {
    .chooseDay {
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
            display: flex;
            align-items: center;
            font-size: 12px;
            font-weight: 400;
            color: #979797;
        }
        .right {
            display: flex;
            align-items: center;
            font-size: 12px;
            font-weight: 400;
            color: #979797;
            img {
                width: 10px;
                margin-left: 7px;
                height: 10px;
            }
        }

        .radio {
            height: 8px;
            width: 8px;
            margin-right: 5px;
            border-radius: 50%;
            background: #66d6ff;
        }
    }
}
#Trading,
#Trading2 {
    height: 200px;
}
.title {
    border-bottom: 1px solid #e8e8e8;
    padding: 10px;
    img {
        margin-right: 10px;
        width: 22px;
        height: 15px;
    }
    text {
        font-size: 16px;
        font-weight: 500;
        color: #000000;
        opacity: 1;
    }
}
</style>
